<template>
	<custom-page :title="getTitle" backgroundColor="#F9F9FB">
		<template #page>
			<view class="page-content">
				<common-list-view class="list-view">
					<template #content>
						<template v-if="type == 'nick'">
							<view class="input-row">
								<input placeholder="请输入昵称" v-model="name" maxlength="8"/>
								<view class="num">{{(name)?name.length:0}}/8</view>
							</view>
							<view class="tips">{{'请设置2-8个字符，不包括@<>/等无效字符喔'}}</view>
						</template>
						<template v-if="type == 'introduce'">
							<view class="input-area">
								<textarea placeholder="请输入简介" v-model="introductory" maxlength="50"></textarea>
								<view class="input-size">{{(introductory)?introductory.length:0}}/50</view>
							</view>
							<view class="tips">{{'简介尽量写的短小精悍哟'}}</view>
						</template>
						<template v-if="type == 'sex'">
							<view class="top-title">请选择您的性别</view>
							<view class="item-row" @click="sexClick('0')">
								<view class="flex">女</view>
								<image class="select-img" :src="asserts.ic_radio_select" v-if="sex=='0'"></image>
							</view>
							<view class="divider"></view>
							<view class="item-row" @click="sexClick('1')">
								<view class="flex">男</view>
								<image class="select-img" :src="asserts.ic_radio_select" v-if="sex=='1'"></image>
							</view>
						</template>
						<template v-if="type == 'birthday'">
							<picker @change="birthdayChange" mode="date">
								<view class="item-row">
									<view class="flex gray-col">生日</view>
									<view>{{birthdayTime || '请选择'}}</view>
									<image class="right-img" :src="asserts.ic_arrow_right"></image>
								</view>
							</picker>
						</template>
						<template v-if="type == 'practiceState'">
							<view class="top-title">请选择您的执业状态</view>
							<view class="item-row" @click="practiceStateClick('1')">
								<view class="flex">自由</view>
								<image class="select-img" :src="asserts.ic_radio_select" v-if="practiceState=='1'"></image>
							</view>
							<view class="divider"></view>
							<view class="item-row" @click="practiceStateClick('5')">
								<view class="flex">本店</view>
								<image class="select-img" :src="asserts.ic_radio_select" v-if="practiceState=='5'"></image>
							</view>
							<view class="item-row" v-if="practiceState=='5'" @click="selectStoreClick">
								<view class="flex">服务门店</view>
								<view>{{deptName || '请选择'}}</view>
								<image class="right-img" :src="asserts.ic_arrow_right"></image>
							</view>
						</template>
						<template v-if="type == 'salesman'">
							<view class="top-title">请输入所属管理者</view>
							<view class="input-row">
								<input placeholder="请输入业务员名称" v-model="salesmanUserName"/>
							</view>
							<view style="height: 1rpx;"></view>
							<view class="input-row">
								<input placeholder="请输入业务员电话" v-model="salesmanUserPhone"/>
							</view>
						</template>
					</template>
				</common-list-view>
				<custom-bottom-button text="保存" @confirm="confirmClick"></custom-bottom-button>
			</view>
		</template>
		<template #popup>
			<assistant-reserve-store-popup ref="storePopup" @storeInfoSelectBack="storeInfoSelectBack"></assistant-reserve-store-popup>
		</template>
	</custom-page>
</template>

<script>
	import {
		apiBase
	} from '../../global/config.js'
	import { getTimeMills } from '../../utils/utils'
	export default {
		data() {
			return {
				id: '',
				name: '',
				title: '',
				type: '',
				sex: '',
				salesmanUserName: '',
				salesmanUserPhone: '',
				practiceState: '',
				birthdayTime: '',
				deptId: '',
				deptName: '',
				introductory: '',
				userType: '',
				playerInfo: {},
				assistantInfo: {},
			}
		},
		computed: {
			getTitle(){
				let type = this.type
				if(type == 'nick'){
					return '编辑昵称'
				}else if(type == 'introduce'){
					return '编辑简介'
				}else if(type == 'sex'){
					return '选择性别'
				}else if(type == 'birthday'){
					return '生日信息'
				}else if(type == 'practiceState'){
					return '执业状态'
				}else if(type == 'salesman'){
					return '所属管理者'
				}else{
					return ''
				}
			}
		},
		onLoad(val) {
			this.type = val.type
			this.userType = val.userType
			if(this.userType == '2'){
				this.getAssistantDetailToken()
			}else{
				this.getPlayerInfo()
			}
		},
		methods: {
			//用户详情（根据Token获取）
			getPlayerInfo(){
				this.requestCenter.getPlayerInfo().then(res => {
					this.name = res.name
					this.sex = res.sex
					this.birthdayTime = res.birthdayTime
					this.id = res.id
				})
			},
			
			//助教详情
			getAssistantDetailToken(){
				this.requestCenter.getAssistantDetailToken().then(res => {
					this.name = res.name
					this.sex = res.sex
					this.birthdayTime = res.birthdayTime
					this.introductory = res.introductory
					this.id = res.id
					this.assistantInfo = res
				})
			},
			
			//选择性别
			sexClick(sex){
				this.sex = sex
			},
			
			//选择生日
			birthdayChange(e){
				this.birthdayTime = e.detail.value
			},
			
			//选择执教状态
			practiceStateClick(practiceState){
				this.practiceState = practiceState
				if(practiceState == 5){
					this.selectStoreClick()
				}
			},
			
			//选择服务门店
			selectStoreClick(){
				this.$refs.storePopup.show()
			},
			
			//门店选择回调
			storeInfoSelectBack(data){
				let info = data.data
				this.deptId = info.id
				this.deptName = info.name
			},
			
			//点击确定
			confirmClick(){
				let type = this.type
				if(this.userType == '2'){
					if(type == 'nick'){
						this.assistantInfo.name = this.name
					}else if(type == 'introduce'){
						this.assistantInfo.introductory = this.introductory
					}else if(type == 'sex'){
						this.assistantInfo.sex = this.sex
					}else if(type == 'practiceState'){
						this.assistantInfo.practiceState = this.practiceState
						if(this.practiceState == 5){		//服务门店
							this.assistantInfo.deptId = this.deptId
						}else{
							this.assistantInfo.deptId = ''
						}
					}else if(type == 'salesman'){
						this.assistantInfo.salesmanUserName = this.salesmanUserName
						this.assistantInfo.salesmanUserPhone = this.salesmanUserPhone
					}
					this.assistantInfo.birthdayTime = getTimeMills(this.birthdayTime)
					this.requestCenter.updateAssistantDetail(this.assistantInfo).then(res => {
						const eventChannel = this.getOpenerEventChannel();
						eventChannel.emit('personalEdit')
						uni.navigateBack()
					})
				}else{
					let params = {}
					if(type == 'nick'){
						params = {
							id: this.id,
							name: this.name
						}
					}else if(type == 'introduce'){
						params = {
							id: this.id,
							introductory: this.introductory
						}
					}else if(type == 'sex'){
						params = {
							id: this.id,
							sex: this.sex
						}
					}else if(type == 'birthday'){
						params = {
							id: this.id,
							birthdayTime: getTimeMills(this.birthdayTime)
						}
					}
					this.requestCenter.updatePlayerInfo(params).then(res => {
						const eventChannel = this.getOpenerEventChannel();
						eventChannel.emit('personalEdit')
						uni.navigateBack()
					})
				}
			}
		}
	}
</script>

<style scoped lang="less">
	.page-content{
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}
	.list-view{
		flex: 1;
		overflow: hidden;
	}
	.top-title{
		margin: 32rpx;
		font-size: 32rpx;
		color: #021624;
	}
	.item-row,
	.input-row{
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 100rpx;
		background-color: white;
		padding: 0 32rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		input{
			flex: 1;
		}
		.num{
			color: #ABAFB7;
			line-height: 48rpx;
		}
	}
	.flex{
		flex: 1;
	}
	.select-img{
		width: 40rpx;
		height: 40rpx;
	}
	.input-info{
		font-size: 28rpx;
		flex: 1;
		color: #021624;
	}
	.gray-col{
		font-size: 28rpx;
		color: #585F70;
	}
	.input-area{
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		background-color: white;
		padding: 0 32rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		textarea{
			width: 100%;
			height: 170rpx;
			padding-top: 30rpx;
			color: #021624;
		}
	}
	.input-size{
		color: #ABAFB7;
		line-height: 48rpx;
		margin-bottom: 16rpx;
	}
	.divider{
		width: calc(100% - 64rpx);
		margin: 0 32rpx;
		height: 0.5rpx;
		background-color: #F5F5F5;
	}
	.right-img{
		width: 20rpx;
		height: 24rpx;
		margin-left: 26rpx;
	}
	.tips{
		width: calc(100% - 64rpx);
		font-size: 24rpx;
		color: #ABAFB7;
		margin: 22rpx 32rpx;
	}
</style>
